<template>
	<view class="container">
		<view class="cu-card panel-user">
			<view class="cu-item">
				<view class="user-title"><text class="txt">{{userInfo.roleTypeName}}登陆</text></view>
				<view class="padding-left padding-right padding-top-xs padding-bottom-sm flex align-center">
					<view class="cu-avatar lg round" 
						style="background-image:url(../../static/def_face.jpg);"></view>
					<view class="margin-left-sm flex-twice text-sm">
						<view>{{userInfo.nickname}}</view>
						<view>{{$utils.dataDesensitization(userInfo.phone)}}</view>
					</view>
					<view class="flex flex-direction">
						<button class="cu-btn sm bg-orange" @click="toMine()">个人中心</button>
						<button class="cu-btn sm margin-top" @click="toLoginChange()">切换账号</button>
					</view>
				</view>
			</view>
		</view>
		<view class="flex bg-white margin-top-sm margin-left margin-right padding-sm radius">
			<view class="flex-sub text-center">
				<view class="text-sm margin-top-sm">钱包余额</view>
				<view class="text-lg margin-top-sm">{{walletInfo.money}}</view>
			</view>
			<view class="flex-sub text-center">
				<view class="text-sm margin-top-sm">已转出金额</view>
				<view class="text-lg margin-top-sm">{{walletInfo.withdrawalMoney}}</view>
			</view>
		</view>
		<view class="cu-card panel-apps margin-top-sm margin-bottom">
			<view class="cu-item">
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" @click="btnScan()">
					  <view class="icon-tag"><image src="/static/icons/icon_scan.png" mode="aspectFit"></image></view>
					  <text>扫一扫</text>
					</view>
					<view class="cu-item" v-for="(item,index) in appListData" :key="index" @click="$utils.toURL(item.url)">
					  <view class="icon-tag"><image :src="resDomain + item.iconImg" mode="aspectFit"></image></view>
					  <text>{{item.name}}</text>
					</view>
					<!--
					<view class="cu-item">
					  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
					  <text>更多</text>
					</view>
					-->
				</view>
			</view>
		</view>
		<!--
		<view class="list-header bg-white margin-left margin-right">
		    <view class="solid-bottom">
		        <view class="cu-bar search">
		            <view class="search-form round">
		                <text class="cuIcon-search"></text>
		                <input type="text" placeholder="搜索网点名称" v-model="keyword"></input>
		            </view>
		            <view class="action">
		                <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
		            </view>
		        </view>
		    </view>
		</view>
		-->
		<view class="list-body">
			<view class="cu-card article">
				<view class="cu-item" v-for="(item,index) in listData" :key="index">
					<view>介绍的代理：{{item.userName}}({{item.userPhone}})</view>
					<view>钱包余额：{{item.moneyStr}}元</view>
					<view>已转出金额：{{item.withdrawnMoneyStr}}元</view>
					<view class="text-right flex align-end justify-end">
						<button class="cu-btn bg-orange sm" @click="toWalletInfo(item)">个人钱包</button>
					</view>
				</view>
			</view>
			<view class="foot"><text class="ftxt">我也是有底线的</text></view>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				appListData:[],
				walletInfo:{
					money:'0.0',
					withdrawalMoney:'0.0'
				},
				resDomain:this.$store.getters.GET_resDomain,
				userInfo:this.$store.getters.GET_userInfo || {},
				listData:[],
				keyword:'',
				pageNo:1,
				modalName:null
			};
		},
		onLoad(option) {
			console.log(this.userInfo);
			this._loadAppListData();
			this._loadWalletListData();
		},
		onShow(){
			this._jssdk();
		},
		methods:{
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'初始化失败',
							icon:'error'
						})
					}
				})
			},
			//获取功能项
			_loadAppListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.funcModelList,{},res=>{
					console.log(res);
					if(res.code == 200){
						const items = res.body.items || [];
						_self.appListData = items;
					}
					_self.$forceUpdate();
				})
			},
			_loadWalletListData:function(){
				if(this.pageNo > 0){
					const _self = this;
					const api = this.$request;
					api.post(api.url.agentReferrerWalletList,{
						trim:this.keyword,
						pageNo:this.pageNo
					},(res)=>{
						if(res.code == 200){
							_self.walletInfo = {
								money:res.body.money,
								withdrawalMoney:res.body.withdrawnMoney
							}
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo+1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			btnScan(){
				const _self = this;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							$common.toPageByScan(res.resultStr);
						}
					})
				})
			},
			btnHideModal:function(){
				this.modalName = null;
			},
			toWalletInfo:function(item){
				uni.navigateTo({
					url:'/pages/mine/wallet/index?userId='+item.userId
				})
			},
			toMine:function(){
				uni.navigateTo({
					url:'/pages/mine/mine'
				})
			},
			toLoginChange:function(){
				uni.navigateTo({
					url:'/pages/login/change'
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-apps .cu-item{margin-top:0;margin-bottom:0;}
.container .panel-apps .icon-tag{border-radius:50%;width:86rpx;height:86rpx;margin: 0 auto 5rpx;background-color: #fff6e7;
	display:flex;justify-content:center;align-items:center;}
.container .panel-apps .icon-tag image{width:58rpx;height:58rpx;}
.container .panel-apps .grid>.cu-item text{margin-top:0;font-size:24rpx;}
.container .panel-apps .cu-item .title{padding:15rpx 30rpx 0 30rpx;color:#555555;}
.container .panel-user .cu-item{border-radius:20rpx;margin-bottom:0;}
.container .panel-user .cu-item .flex-twice view{padding-top:5rpx;}
.user-title{
	background-color: white;
	color: white;
	font-size: 20rpx;
	position: relative;
	&::before{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 20%;
		background-color: #ed6a3e;
	}
	.txt{
		display: inline-block;
		width: 20%;
		text-align: center;
		padding:10rpx 0;
		background: linear-gradient(160deg,#fa9454,#e65332);
		border-radius: 20rpx 0 20rpx 0;
		position: relative;
		&::before,&::after{
			content: "";
			display: block;
			position: absolute;
			right: -20rpx;
			width: 20rpx;
		}
		&::before{
			top: 20%;
			height: 20rpx;
			background-color: #ed6a3e;
			z-index: 100;
		}
		&::after{
			bottom: 0;
			height: 80%;
			background-color: white;
			border-radius: 20rpx 0 0 0;
			z-index: 200;
		}
	}
}
.list-body .cu-card>.cu-item{margin-top:0;border-radius:0;padding:30rpx;}
</style>
